import { MenuOption } from "naive-ui"; import { MenuOption } from "naive-ui";

<script lang="tsx" setup>
defineOptions({
  name: 'PromissionModal'
});
const show = defineModel<boolean>('show', {
  default: true
});
const options: MenuOption[] = [
  {
    label: '系统管理',
    key: '1'
  },
  {
    label: '租户管理',
    key: '2'
  }
];
</script>

<template>
  <NModal v-model:show="show" title="添加权限" preset="card" class="w-900px">
    <div class="h-500px">
      <NGrid responsive="screen" item-responsive>
        <NGi span="24 s:24 m:17" class="border-1px">
          <NGrid responsive="screen" item-responsive class="b-rd-6px">
            <NGi span="24 s:24 m:9" class="">
              <NList hoverable clickable :show-divider="false" class="h-500px border-r-1px p-4px">
                <NListItem>
                  <template #default>
                    <div class="flex cursor-pointer flex-gap-5px flex-justify-start flex-items-center">
                      <SvgIcon icon="ic:baseline-apps" class="font-size-18px" />
                      <div>全部</div>
                    </div>
                  </template>
                </NListItem>
                <NListItem>
                  <template #default>
                    <div class="flex cursor-pointer flex-gap-5px flex-justify-start flex-items-center">
                      <SvgIcon icon="ic:baseline-apps" class="font-size-18px" />
                      <div>系统管理</div>
                    </div>
                  </template>
                </NListItem>
                <NListItem>
                  <template #default>
                    <div class="flex cursor-pointer flex-gap-5px flex-justify-start flex-items-center">
                      <SvgIcon icon="ic:baseline-apps" class="font-size-18px" />
                      <div>租户管理</div>
                    </div>
                  </template>
                </NListItem>
              </NList>
            </NGi>
            <NGi span="24 s:24 m:15" class="p-4px">
              <NList clickable :show-divider="false" class="p-4px">
                <NListItem style="padding: 2px">
                  <template #default>
                    <NCheckbox>全部</NCheckbox>
                  </template>
                </NListItem>
                <NListItem style="padding: 2px">
                  <template #default>
                    <NCheckbox>获取组织部门信息</NCheckbox>
                  </template>
                </NListItem>
              </NList>
            </NGi>
          </NGrid>
        </NGi>
        <NGi span="24 s:24 m:7" class="h-500px pl-10px">123</NGi>
      </NGrid>
    </div>
  </NModal>
</template>

<style lang="scss" scoped></style>
